<template>
	<view class="message-list">
		<view v-for="(message, index) in messages" :key="index">
			<!-- 滑动删除组件 -->
			<u-swipe-action :options="swipeOptions" @click="onSwipeClick(index)" @open="onSwipeOpen(index)"
				:style="{ width: '100%' }">
				<!-- 消息卡片 -->
				<view class="message-item" @click.stop="goToDetail(message)">
					<view class="avatar">
						<u-avatar :src="message.avatar" size="40"></u-avatar>
					</view>
					<view class="message-content">
						<view class="message-header">
							<text class="doctor-name">{{ message.doctorName }} {{ message.title }}</text>
							<text class="message-time">{{ message.time }}</text>
						</view>
						<view class="message-detail">
							<text>{{ message.detail }}</text>
						</view>
						<view class="patient-info" v-if="message.patientInfo">
							<text>{{ message.patientInfo }}</text>
						</view>
					</view>
				</view>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messages: [{
						avatar: "https://example.com/avatar1.jpg",
						doctorName: "张智海",
						title: " 主治医师",
						time: "11:58",
						detail: "ok",
						patientInfo: "代茶饮 就诊人:沙书桓",
					},
					{
						avatar: "https://example.com/avatar2.jpg",
						doctorName: "林阳坤",
						title: " 副主任医师",
						time: "08-07",
						detail: "用户取消订单",
						patientInfo: "在线问诊 就诊人:沙书桓",
					},
				],
				swipeOptions: [{
					text: "删除",
					style: {
						backgroundColor: "#ff4d4f",
						color: "#fff",
						width: "80px", // 关键：指定按钮宽度
					},
				}, ],
			};
		},
		methods: {
			onSwipeClick(index) {
				uni.showModal({
					title: "提示",
					content: "确定删除这条消息吗？",
					success: (res) => {
						if (res.confirm) {
							this.messages.splice(index, 1);
							uni.showToast({
								title: "删除成功",
								icon: "success",
							});
						}
					},
				});
			},
			onSwipeOpen(index) {
				console.log("当前滑动打开的索引：", index);
			},
			goToDetail(message) {
				uni.navigateTo({
					url: `/pages/message-detail/message-detail?data=${encodeURIComponent(JSON.stringify(message))}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.message-list {
		padding: 0;
		width: 100%;

		.message-item {
			display: flex;
			padding: 15px;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff; // 确保背景色正常
			border-bottom: 1px solid #eee;

			.avatar {
				margin-right: 15px;
			}

			.message-content {
				flex: 1;

				.message-header {
					display: flex;
					justify-content: space-between;
					margin-bottom: 5px;

					.doctor-name {
						font-size: 16px;
						font-weight: bold;
					}

					.message-time {
						color: #999;
						font-size: 12px;
					}
				}

				.message-detail {
					margin-bottom: 5px;
					color: #333;
				}

				.patient-info {
					color: #999;
					font-size: 12px;
				}
			}
		}
	}
</style>